<template>
  <div class="courseInterval">
    <template v-if="courseStatus === -1">
      <span class="no-end">已结束</span>
    </template>
    <template v-else-if="courseStatus === 2">
      <span class="no-ready">未开始</span>
    </template>
    <template v-else-if="courseStatus === 1">
      <div class="ready-enter">
        <span>距离开课</span>
        <span>剩余&nbsp;{{ timecountdown | formatSencond2MinuteSencond }}</span>
      </div>
    </template>
    <template v-else-if="courseStatus === 0">
      <a-button size="small" class="enter-btn" type="primary" shape="round" @click.stop="enterRoom(data)">进入课堂</a-button>
    </template>
    <template v-else-if="courseStatus === 3">
      <a-button size="small" disabled class="enter-btn" type="primary" shape="round">已过进入时间</a-button>
    </template>
  </div>
</template>

<script>
import { enterStatus } from "@/utils/format-tools";
export default {
  name: "courseInterval",
  components: {},
  data() {
    return {
        timer: '',
        timecountdown: this.data.timecountdown
    };
  },
  props: ["data"],
  computed: {
    courseStatus: function() {
      // console.log(this.data, '===========')
      const {s_time, e_time } = this.data;
      const { pre_in_class, after_in_class } = this.data.config || {pre_in_class: 0, after_in_class: 0};
      let enterCode = enterStatus({
        timecountdown: this.timecountdown,
        pre_in_class,
        after_in_class,
        s_time,
        e_time
      });
      // 如有进入直播的课 派发事件更新顶部的正在直播
      if (+enterCode === 0 && this.timecountdown >= pre_in_class) {
        this.$emit('updateLive')
      }
      return enterCode
    }
  },
  watch: {},
  methods: {
    enterRoom (data) {
      console.log(data)
      this.$emit('enterRoom', data)
    },
    enterInterval (data) {
      this.timecountdown --
      if (this.timecountdown < 0) {
        clearInterval(this.timer)
      }
    }
  },
  created() {},
  mounted() {
    this.timer = setInterval(this.enterInterval, 1000)
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {
    clearInterval(this.timer)
  },
  destroyed() {},
  activated() {}
};
</script>
<style lang="less" scoped>
/* @import url(); 引入公共css类 */

.courseInterval {
  font-size: 16px;
  text-align: center;
  .ready-enter {
    span {
      display: block;
      &:nth-child(1) {
        color: @primary-color;
      }
    }
  }

  .no-ready {
    color: #27BFA3;
  }
  .no-end {
    color: #BCBCBC;
  }
  .enter-btn {
    width: 120px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
  }
}
</style>
